<template>
  <div class="all">
    <div slot="header" class="nav">
        <!-- 面包屑导航 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">博客首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">文章详情</a></el-breadcrumb-item>
          </el-breadcrumb>
    </div>
    <div class="left">
      <div class="left-top">
        <div class="point"></div>
        <p class="title">文章详情</p>
        <div class="icon">
        </div>
        <div class="menu">
            <el-dropdown>
              <span class="el-dropdown-link">
                <i class="el-icon-more"></i>
              </span>
              <el-dropdown-menu slot="dropdown" class="menu">
                <el-dropdown-item command="a" @click.native="deleteDoc">删除</el-dropdown-item>
                <el-dropdown-item command="b"  @click.native="editDoc">编辑</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
        </div>
      </div>
      <div class="left-bottom">
        <el-card class="box">
          <div slot="header" class="clearfix">
            <span class="docname">{{this.article.title}}</span>

          </div>
          <div class="text item">
            <div class="grid-content bg-purple">
              <el-descriptions class="margin-top" :column="3" border>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    用户名
                  </template>
                  {{this.article.authorId}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    创建时间
                  </template>
                  {{this.article.createTime}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    类别
                  </template>
                  <el-tag size="small" type="success">
                  <!-- {{itemlist.identity ? itemlist.identity : '文档'}} -->
                  </el-tag>
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="show-content markdown-body">
              <span style="font-size:14px;color: #686868;"  v-html="this.article.content"></span>
            </div>
          </div>
        </el-card>

      </div>
    </div>
      <Recommend></Recommend>
      <img class="right-mid" src="@/assets/study_bg.png" alt=""/>
  </div>
</template>

<script>
import {getArticleContent} from '@/api/articles'
import { getUserProfile } from '@/api/user.js'
import Recommend from "../all/components/recommend.vue"
export default {
  name: '',
  components: {
    Recommend
  },
  props:{},
  data() {
    return {
      loading: true,
      userList: {
        birth: "",
        createTime: "",
        email: "",
        hobby: "",
        id: "",
        institute: "",
        name: "",
        password: "",
        phoneNumber: "",
        sex: "",
        specialty: "",
        totalTime: null,
        userPic: null,
      },
      article: {
        title: "",
        summary: "",
        tag: [
          { tag: "" },
          { tag: "" }
        ],
        articleId: "",
        status: 1,
        articlePic: "",
        content: {
          content: "",
          contentHtml: ""
        },
        createTime: "",
        authorId: ""
      }
    }
  },
  created(){
    this.getContent();
    this.loadUser()
    // console.log(this.article.articleId);
  },
  methods: {
    //获取当前用户信息
    loadUser() {
      getUserProfile().then(res => {
        this.userList = res.data.data
        // console.log(this.userList)
      });
    },
    async getContent() {
    const d = {
      articleId: this.$route.params.articleId
    }
     // 获取文章id，解构赋值 
      const {data:res} = await getArticleContent(d) 
      console.log(res.data);
      this.article.title = res.data.title
      this.article.summary = res.data.summary
      this.article.content = res.data.content.content
      this.article.tag.tag = res.data.tag[0]
      this.article.createTime = res.data.createTime
      this.article.authorId = res.data.authorId
    },
    // 删除文档
    deleteDoc() {
      console.log(" ")
      // const user = JSON.parse(window.sessionStorage.getItem('user'))
      // if (user.username === this.itemlist.creator) {
      // // 发起删除请求
      //   deleDoc(this.itemlist.id).then(res => {
      //     this.$router.push('/page/group/groupdetail/' + this.groId)
      //     this.$notify({
      //       title: '成功',
      //       message: '删除文档成功',
      //       type: 'success'
      //     });
      //   })
      // } else {
      //   this.$message('你不能删除别人的文章')
      // }
    },
    // 编辑文档
    editDoc() {
      console.log(" ")
      // const user = JSON.parse(window.sessionStorage.getItem('user'))
      // if (user.username === this.itemlist.creator) {
      //   this.$router.push('/page/group/writeArticle/' + this.listId + '/' + this.groId)
      // } else {
      //   this.$message('你不能编辑别人的文章')
      // }
    },

  }
  
}
</script>

<style lang="less" scoped>
.all {
  height: 100vh;
  .nav {
    position: relative;
    top: 2vh;
  }
  .left {
    display: inline-block;
    height: 87vh;
    width: 52vw;
    background-color: #d5eda1;
    position: relative;
    top: 6vh;
    left: 0vw;
    border-radius: 5px;
    .left-top {
      height: 5vh;
      .point {
        display: inline-block;
        height: 1vh;
        width: 1vh;
        background: rgba(13, 128, 120, 1);
        margin-top: 2vh;
        margin-left: 2vh;
        margin-right: 2vh;
        border-radius: 50%;
      }
      .title {
        display: inline-block;
        width: 10vw;
        height: 3vh;
        line-height: 5vh;
        margin-top: 0;
        margin-bottom: 0;
      }
      .menu {
        position: absolute;
        top: 1vh;
        right: 0vw;
        ::v-deep .el-dropdown {
          color: rgba(183, 183, 183, 1);;
          float: right;
          margin-right: 0.8vw;
          transform: rotate(90deg);
        }
      }
    }
    .left-bottom {
      .box {
        height: 82vh;
        width: 52vw;
        position: absolute;
        left: 0vw;
        border: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        box-shadow: none;
        .docname {
          display: inline-block;
          margin-left: 20vw;
        }
      }
    }
  }
  .recommend {
    top: 6vw;
    right: 8vh;
    left: auto;
  }
  .right-mid {
    display: inline-block;
    height: 20vw;
    width: 20vw;
    position: absolute;
    top: 45vh;
    right: 5vw;
  }
}
</style>
